<template>
  <MkDialogEdit ref="dialogRef" v-model:isEdit="ctx.isEdit" @submit="submit" :canEdit="ctx.isEdit">
    <MkForm :model="ctx.entity" ref="formRef" formId="BasConfig">
      <MkInput label='参数标题' v-model='ctx.entity.title' prop='title' :isEdit='false' />
      <MkInput label='参数值' v-model='ctx.entity.val' prop='value' :isEdit='ctx.isEdit' />
      <MkInput label='一级分类' v-model='ctx.entity.category1' prop='category1' :isEdit='false' />
      <MkInput label='二级分类' v-model='ctx.entity.category2' prop='category2' :isEdit='false' />
      <MkInput label="备注" v-model="ctx.entity.remark" prop='remark' :isEdit="ctx.isEdit" />
      <MkIsEnabled label='是否可以修改' v-model='ctx.entity.allowEdit' prop='isEnabled' :isEdit='false' />
    </MkForm>
  </MkDialogEdit>
</template>

<script lang='ts' setup>
import { BasConfigApi, BasConfigOutput } from '/@/api/bas/BasConfig';
import MkForm from '/@/componentsMaike/forms/MkForm.vue';
import { isNull, clog } from '/@/utils';

const emits = defineEmits(['query'])
const ctx = reactive({
  isEdit: false,
  entity: {} as BasConfigOutput,
});

const dialogRef = ref();
const formRef = ref<InstanceType<typeof MkForm>>();

/** 打开弹框 */
const open = async (row: BasConfigOutput) => {
  dialogRef.value.show();
  if (isNull(row?.code)) {
    return;
  } else {
    ctx.isEdit = false;
    ctx.entity = JSON.parse(JSON.stringify(row));
  }
};

const close = () => {
  dialogRef.value?.close();
  emits('query')
};

const submit = async () => {
  if (!ctx.isEdit) {
    close();
    return;
  }
  // 表单验证
  const validate = await formRef?.value?.validate();
  if (!validate) return;
  if (isNull(ctx.entity.code)) {
    return;
  } else {
    await BasConfigApi.update(ctx.entity);
  }
  close();
};

defineExpose({ open })
</script>
